<template>
	<view class="application p30">
		<navbar title="报名入口"></navbar>
		<view class="search-top acea-row row-middle row-center" :style="{ top:(sysHeight+48)+'px' }">
			<view class="search acea-row row-middle row-center themecolor">
				<view class="iconfont icon-sousuoxiao themecolor fs36"></view>
				<view class="fs28 ml10">
					<input type="text" v-model="keywords" placeholder="请输入入口名称" placeholder-class="themecolor fs28">
				</view>
			</view>
			<view class="acea-row row-middle tabnav">
				<scroll-view scroll-x="true" class="scroll-nav">
					<block v-for="(item,index) in stagelist" :key="index">
						<view class="item" :class="tabindex==item.stage_id?'on':''" @click="tabclick(item.stage_id)">{{ item.title }}</view>
					</block>
				</scroll-view>
			</view>
		</view>

		<view class="list">
			<block v-for="(item,index) in prolist" :key="index">
				<view class="item bgwhite mb30" @click="detail(item)">
					<view class="picture">
						<image class="imgwh" :src="item.image" mode=""></image>
						<text class="tips-left fs30">{{ item.stageName }}</text>
						<!-- <text class="num">报名人数:{{ item.xiangqingData.baomingCount }}人</text> -->
					</view>
					<view class="p30">
						<view class="acea-row row-between-wrapper">
							<view class="title bold fs32 line1">{{ item.title }}</view>
							<view class="baoming fs26 acea-row row-middle row-center">报名中</view>
						</view>
						<view class="subtitle fs26 fc333 line2 mt10">
							{{ item.synopsis }}
						</view>
						<view class="acea-row row-between-wrapper">
							<view>
								<view class="acea-row row-middle mt10">
									<text class="iconfont icon-wxbdingwei fc222 fs32"></text>
									<text class="ml10 fs30 fc333 line1" style="width: 360rpx;">{{ item.baoming_to_address }}</text>
								</view>
								<view class="daohang acea-row row-middle row-center themecolor mt10" @click.stop="openlocation(item)">
									<text class="iconfont icon-daohang"></text>
									<text class="fs24 ml10">导航</text>
								</view>
							</view>
							<view class="acea-row row-middle row-column">
								<view class="detail acea-row row-middle row-center fcwhite fs26">查看详情</view>
								<view class="callphone acea-row row-middle row-center" @click.stop="bohao(item.huodong_phone)">
									<image src="https://yuchengpic.oss-cn-hangzhou.aliyuncs.com/img/callphone-icon.png" mode="aspectFit"></image>
								</view>
							</view>
						</view>
						
					</view>
				</view> 
			</block>
			<view class='loadingicon acea-row row-center-wrapper fs26 themecolor' v-if="prolist.length>0">
				<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
			</view>
			<pageonone v-if="prolist.length==0"></pageonone>
		</view>
		
	</view>
</template>

<script>
	const app = getApp();
	import navbar from '../../components/navbar.vue';
	import pageonone from '../../components/pagenone.vue';
	import{
		inletList
	} from '@/api/api.js'
	import{
		stageList
	} from '@/api/other.js'
	export default {
		components:{
			navbar,
			pageonone
		},
		data() {
			return {
				sysHeight: app.globalData.sysHeight,
				loadend: false,
				loading: false,
				loadTitle: this.$t(`加载更多`),
				tabindex:1,
				page:1,
				limit:10,
				prolist:[],
				city_id:'',
				latitude: '',
				longitude: '',
				stagelist:[],
				keywords:'',
				
			};
		},
		watch:{
			keywords(){
				this.empty();
			}
		},
		onLoad(option){
			this.city_id = option.city_id;
			this.latitude = option.latitude;
			this.longitude = option.longitude;
			this.getlist();
			this.getstageList();
		},
		methods:{
			bohao(phone){
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			getstageList(){
				stageList({ xiangmu_id:1 }).then(res=>{
					this.stagelist = res.data.list;
				})
			},
			openlocation(item){
				this.$util.openlocation(item.latitude,item.longitude);
			},
			empty(){
				this.loadend = false;
				this.loading = false;
				this.page = 1;
				this.prolist = [];
				this.getlist();
			},
			getlist(){
				let that = this;
				if (that.loadend) return;
				if (that.loading) return;
				let data = {
					page: that.page,
					limit: that.limit,
					city_id: that.city_id,
					latitude: that.latitude,
					longitude: that.longitude,
					stage_id: that.tabindex,
					keywords: that.keywords
				}
				inletList( data ).then(res=>{
					let list = res.data.data.list;
					let prolist = that.$util.SplitArray(list, that.prolist);
					let loadend = list.length < that.limit;
					that.loadend = loadend;
					that.loading = false;
					that.loadTitle = loadend ? that.$t(`没有更多内容啦~`) : that.$t(`加载更多`);
					that.$set(that, 'prolist', prolist);
					that.$set(that, 'page', that.page + 1);
				}).catch(err=>{
					that.loading = false;
					that.loadTitle = that.$t(`加载更多`);
				})
			},
			tabclick(val){
				this.tabindex = val;
				this.empty();
			},
			detail(item){
				uni.navigateTo({
					url: `/pages/home/application-details?id=${item.huodong_id}`
				})
			}
		},
		onReachBottom() {
			this.getlist();
		}
	}
</script>

<style lang="scss">
	.application{
		
		.callphone{
			width: 80rpx;
			height: 80rpx;
			background-color: #6252DF;
			border-radius: 50%;
			margin-top: 20rpx;
			
			image{
				width: 60rpx;
				height: 60rpx;
			}
		}
		
		.tabnav{
			background-color: #f2f2f2;
			padding: 30rpx 30rpx 0 30rpx;
			width: 100%;
			
			.scroll-nav{
				white-space: nowrap;
			}
			
			.item~.item{
				margin-left: 50rpx;
			}
			
			.item{
				color: #666666;
				font-size: 32rpx;
				line-height: 50rpx;
				display: inline-block;
				
				&.on{
					color: #6252DF;
					border-bottom: 4rpx solid #6252DF;
				}
			}
		}
		
		.search-top{
			position: fixed;
			left: 0;
			right: 0;
			width: 100%;
			background-color: #f2f2f2;
			z-index: 99;
			padding: 30rpx 0;
			
			.search{
				width: 660rpx;
				height: 88rpx;
				border-radius: 44rpx;
				background: rgba(98, 82, 223, 0.08);
				border: 1rpx solid #6252DF;
				
				input{ 
					width: 100%;
				}
			}
		}
		
		.list{
			margin-top: 200rpx;
			
			.item{
				width: 100%;
				border-radius: 20rpx;
				overflow: hidden;
				
				.picture{
					width: 100%;
					height: 344rpx;
					position: relative;
					
					.tips-left{
						min-width: 144rpx;
						max-width: 200rpx;
						height: 64rpx;
						border-radius: 20rpx 0 20rpx 0;
						background: #6252DF;
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						text-align: center;
						line-height: 64rpx;
						color: #ffffff;
					}
					.num{
						width: 200rpx;
						height: 60rpx;
						border-radius: 154rpx;
						background: rgba(0, 0, 0, 0.6);
						text-align: center;
						line-height: 60rpx;
						color: #ffffff;
						font-size: 22rpx;
						position: absolute;
						bottom: 30rpx;
						left: 30rpx;
					}
				}
				
				.title{
					width: 458rpx;
				}
				.baoming{
					width: 140rpx;
					height: 58rpx;
					border-radius: 16rpx;
					background: rgba(51, 102, 255, 0.3);
					color: #3366FF;
				}
				.subtitle{
					width: 458rpx;
				}
				.daohang{
					width: 144rpx;
					height: 60rpx;
					border-radius: 68rpx;
					background: rgba(98, 82, 223, 0.3);
				}
				.detail{
					width: 200rpx;
					height: 60rpx;
					border-radius: 68rpx;
					background: #6252DF;
				}
			}
		}
		
		
		
	}
</style>
